<template>
  <view>
    <view class="dd">
      <view class="item1">
        <image 
          class="tx" 
          :src="avatarPath" 
          @click="chooseAvatar()" 
          mode="aspectFill" 
          style="width: 130rpx; height: 130rpx;"
        ></image>
        <view class="item2">
          <view class="item3">HI~欢迎回来</view>
          <view v-if="username" class="username-text">{{ username }}</view>
          <view v-else class="item4" @click="goToLogin"><text class="itemz">登录</text></view>
        </view>
      </view>
      <view class="er1">
        <view class="er2">关注3</view>
        <view class="er3">|</view>
        <view class="er4">话题0</view>
      </view>
    </view>
    <view class="item-dj">
      <view>
        <navigator :url="username ? '/pages/collect/collect' : '/pages/login/login'">
          <view class="item-left">
            <image class="menpiao" src="/static/收藏.png"></image>
          </view>
          <view class="item-left">收藏</view>
        </navigator>
      </view>
      <view>
        <navigator :url="username ? '/pages/history/history' : '/pages/login/login'">
          <view class="item-left">
            <image class="menpiao1" src="/static/历史.png"></image>
          </view>
          <view class="item-left">历史</view>
        </navigator>
      </view>
      <view>
        <navigator :url="username ? '/pages/setting/setting' : '/pages/login/login'">
          <view class="item-left">
            <image class="menpiao2" src="/static/设置.png"></image>
          </view>
          <view class="item-left">设置</view>
        </navigator>
      </view>
    </view>

    <view>
      <image style="width: 100%; height: 90rpx;" src="/static/瓜分红包、.jpg"></image>
    </view>

    <view class="button">
      <image class="buttons" style="width: 100%; height: 300rpx;" src="/static/3.webp"></image>
      <view class="button"><text class="hh">已有</text>385,893<text class="hh">人</text></view>
      <view class="button"><text class="hh">在这里发布身边的新鲜事</text></view>

      <navigator url="/pages/Custom/newsPage/newsPage" class="reg-right">我也要发布</navigator>
    </view>

    <view class="button">
      <navigator url="/pages/Custom/newsPage/newsPage" class="buttonx">
        先去逛逛<image class="buttony" style="width: 35rpx; height: 35rpx;" src="/static/右箭头.png"></image>
      </navigator>
    </view>
    <view class="zh"></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      avatarPath: "/static/logo.png",
      username: ''
    }
  },
  onShow() {
    this.getLoginUser();
  },
  methods: {
    getLoginUser() {
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo && userInfo.username) {
        this.username = userInfo.username;
      } else {
        this.username = '';
      }
    },
    goToLogin() {
      uni.navigateTo({
        url: '/pages/index/index'
      });
    },
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: (res) => {
          console.log("选择头像路径：" + res.tempFilePaths[0]);
          this.avatarPath = res.tempFilePaths[0];
        }
      });
    }
  }
}
</script>
<style>
.dd {
  padding-bottom: 0rpx;
  background-image: url("/背景图.png");
  background-position: center;
  margin-top: -30rpx;
  height: 280rpx;
}
.tx {
  margin-top: 10rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 2rpx solid #fff;
  cursor: pointer;
}
.item1 {
  display: flex;
  margin-top: 30rpx;
  margin-left: 20rpx;
}
.item2 {
  margin-top: 15rpx;
}
.item3 {
  margin-left: 20rpx;
  color: #000000;
  font-weight: bold;
  margin-top: 10rpx;
}
.item4 {
  border-radius: 20rpx;
  border: #FFFFFF;
  width: 160rpx;
  height: 60rpx;
  background-color: #DD524D;
  margin-left: 20rpx;
  margin-top: 10rpx;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itemz {
  color: #FFFFFF;
  margin-left: 0;
  font-size: 26rpx;
}
.username-text {
  margin-left: 20rpx;
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #000000;
  font-weight: 500;
}
.er1 {
  display: flex;
  margin-top: 80rpx;
  margin-left: 80rpx;
}
.er2 {
  margin-left: 50rpx;
  color: #000000;
  font-size: 28rpx;
}
.er3 {
  margin-left: 140rpx;
  color: #000000;
  font-size: 28rpx;
}
.er4 {
  margin-left: 150rpx;
  color: #000000;
  font-size: 28rpx;
}
.item-dj {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  flex: 1;
  border-top: 1rpx solid #e6e6e6;
  margin-top: -50rpx;
  margin-bottom: 5rpx;
}
.item-left {
  height: 10rpx;
  line-height: 71rpx;
  width: 50%;
  text-align: center;
  margin: 90rpx;
  font-size: 20rpx;
  padding-bottom: 1rpx;
  margin-top: 20rpx;
}
.menpiao {
  width: 45rpx;
  height: 45rpx;
  text-align: center;
  margin-top: 70rpx;
}
.menpiao1 {
  width: 45rpx;
  height: 45rpx;
  text-align: center;
  margin-top: 70rpx;
}
.menpiao2 {
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  margin-top: 70rpx;
}
.buttons {
  margin-top: 0rpx;
}
.button {
  text-align: center;
}
.reg-right {
  display: inline-block;
  border: 1rpx solid #DD524D;
  width: 250rpx;
  height: 65rpx;
  text-align: center;
  color: #DD524D;
  border-radius: 40rpx;
  margin-bottom: 20rpx;
  line-height: 70rpx;
  margin-top: 40rpx;
  text-decoration: none; 
}
.buttonx {
  color: #999999;
  text-decoration: none; 
  display: inline-flex;
  align-items: center;
  gap: 8rpx; 
}
.hh {
  color: #999999;
}
.zh {
  height: 200rpx;
}
</style>